@import '@assets/base/common.scss';

.home-page {
    width: 100%;
    height: 100%;

    .left-content {
        float: left;

        .today-data {
            .count-data {
                height: 60%;
                @include flex_layout(row, center, center);
                @include position();

                .meddle-line {
                    height: 50px;
                    width: 2px;
                    background-color: $bg7;
                    @include position_center();
                }

                .part-one {
                    width: 50%;
                    color: $cor0;
                    text-align: center;

                    .type-num {
                        height: 32px;
                        line-height: 32px;
                        font-size: $fzmb;
                        @include ell_n();
                    }

                    .type-name {
                        width: 100%;
                        line-height: 28px;
                        font-size: $fzsl;
                        color: $cor5;
                        @include ell_n();
                    }
                }
            }

            .detail-data-box {
                height: 40%;

                .item-data {
                    float: left;
                    width: calc((100% - 24px) / 3);
                    height: 100%;
                    margin-right: 12px;
                    background-color: $bg4;
                    padding: 0 16px;
                    @include flex_layout(row, center, center);

                    &:last-child {
                        margin-right: 0;
                    }

                    @each $type in tv, radio, media {
                        .#{$type}-icon {
                            width: 34px;
                            height: 35px;
                            margin-right: 15px;
                            background: url('#{$iconPath}/#{$type}-icon.png') center center no-repeat;
                        }
                    }

                    .data-num {
                        max-width: calc(100% - 49px);

                        .data-name {
                            height: 22px;
                            line-height: 22px;
                            font-size: $fzn;
                            color: $cor5;
                            text-align: center;
                            @include ell_n();
                        }

                        .detail-num {
                            line-height: 28px;
                            font-size: $fzml;
                            color: $cor0;
                            text-align: center;
                            @include ell_n();
                        }
                    }
                }
            }
        }
    }

    .right-content {
        float: right;

        .content-top {

            .search-types {
                width: 100%;
                height: 100%;
                @include flex_layout(row, flex-end, center);

                .types-content {
                    background-color: $bg7;
                    @include flex_layout(row, flex-start, center);
                    @include position();

                    .move-box {
                        display: block;
                        width: 80px;
                        height: 28px;
                        border: $bb2;
                        @include position(absolute, left, top, 0, 0, 1);
                        @include transition_animate(left, .5s, cubic-bezier(0.645, 0.045, 0.355, 1));
                    }

                    .type-cut-btn {
                        width: 80px;
                        height: 28px;
                        line-height: 28px;
                        text-align: center;
                        font-size: $fzn;
                        color: $cor6;
                        cursor: pointer;
                        background-color: transparent;
                        @include position();
                        z-index: 9;
                        @include transition_animate(color, .5s, cubic-bezier(0.645, 0.045, 0.355, 1));

                        &:hover, &.active {
                            color: $cor7;
                        }

                    }
                }
            }

            .message-content {
                overflow: hidden;
                @include position();

                .list-content {
                    width: 300%;
                    height: 100%;
                    @include position(absolute, left, top, 0, 0, 1);
                    @include transition_animate(left, .5s, cubic-bezier(0.645, 0.045, 0.355, 1));

                    .rank-lists {
                        display: block;
                        float: left;
                        width: calc(100% / 3);
                        height: 100%;

                        .list-item {
                            width: 100%;
                            height: 20%;
                            padding: 0 10px 0 15px;
                            background-color: $bg8;
                            @include flex_layout(row, flex-start, center);
                            &:nth-child(even) {
                                background-color: $bg9;
                            }

                            .hot-name {
                                width: 190px;
                                padding-right: 10px;
                                font-size: $fzn;
                                color: $cor0;
                                @include ell_n();
                            }

                            .hot-precent {
                                flex: 1;

                                .process {
                                    display: block;
                                    height: 9px;
                                    background-color: $bg5;
                                }
                            }

                            .pointer-count {
                                width: 110px;
                                padding-left: 10px;
                                font-size: $fzs;
                                color: $cor5;
                                @include flex_layout(row, flex-start, center);
                                .num {
                                    flex: 1;
                                    text-align: center;
                                }
                            }
                        }
                    }
                }
            }
        }

        .content-bottom {

            .left-pie {
                float: left;
                width: 40%;
                height: 100%;
            }

            .right-bar {
                float: right;
                width: 60%;
                height: 100%;
            }
        }
    }

    .left-content, .right-content {
        width: calc(50% - 6px);
        height: 100%;

        .content-top {
            height: calc(38% - 12px);
            margin-bottom: 12px;
            background-color: $bg0;
        }

        .content-bottom {
            height: 62%;
            background-color: $bg0;

            .echart-box {
                width: 100%;
                height: 100%;
            }
        }

        .part-content {
            height: calc(100% - 40px);
            padding: 0px 12px 12px;

            .today-data, .message-content {
                width: 100%;
                height: 100%;
            }
        }

        // 组件 part-title
        .part-title {
            height: 40px;
            padding: 0 12px;
            @include flex_layout(row, flex-start, flex-start);

            .title-name {
                height: 40px;
                line-height: 38px;
                padding-left: 15px;
                padding-right: 10px;
                color: $cor0;
                font-size: $fzsl;
                @include position();

                .pointer {
                    width: 7px;
                    height: 7px;
                    border-radius: 50%;
                    @include position_center(left, 0px);

                    &.range {
                        background-color: #85FF27;
                    }
                    &.red {
                        background-color: #F33434;
                    }
                    &.sky-blue {
                        background-color: #3676FF;
                    }
                    &.blue {
                        background-color: #3D83FE;
                    }
                }
            }

            .right-child-area {
                flex: 1;
                height: 100%;
            }
        }
        // 组件 part-title
    }
}